<template>
  <div :class="tabClass">
    <router-link v-for="(item, index) in btns" href="javascript:;"
      @click.stop.prevent="bindBtnSwitch($event)"
      :key="index"
      :title="item.title"
      :to="{path: item.path}"
      :class="item.css">
      {{item.title}}
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'tab-button',
  props: {
    btns: {
      type: Array,
      required: true
    },
    lineClass: {
      type: Object,
      required: false,
      default: () => ({ 'tab-button': true })
    },
    enabled: {
      type: Boolean,
      required: false,
      default: true
    },
    onSwitch: {
      type: Function,
      required: false
    }
  },
  methods: {
    bindBtnSwitch (e) {
      !this.enabled && this.onClick && this.onClick(this.onSwitch, e)
    }
  },
  computed: {
    tabClass () {
      return Object.assign({}, this.lineClass, { 'is-disabled': !this.enabled })
    }
  }
}
</script>

<style lang="scss">
@import "~@/css/common/variables";
@import "~@/css/lib/mixin";

.tab-button {
  @extend %ir;
  display: inline-block;
  opacity: 0.8;
  &.is-disabled {
    background-color: #9a9aa9;
    cursor: not-allowed;
  }
}
</style>
